<template>
  <div class="contain">
    <div class="main">
        <el-table
            :data="table"
            stripe
            style="width: 100%"
            header-cell-class-name="tables">
            <el-table-column
            prop="serialNumber"
            label="序号"
            width="60">
                <template slot-scope="scope">
                    <span v-html="scope.row.serialNumber" class="circle">
                    </span>
                </template>
            </el-table-column>
            <el-table-column
            prop="organization"
            label="分组织"
            width="80">
            </el-table-column>
            <el-table-column
            prop="department"
            label="部门">
            </el-table-column>
            <el-table-column
            prop="business"
            label="业务组">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名">
            </el-table-column>
            <el-table-column
            prop="quota"
            label="销售额">
            </el-table-column>
        </el-table>
    </div>
    <div class="main">
        <el-table
            :data="table"
            stripe
            style="width: 100%"
            header-cell-class-name="tables">
            <el-table-column
            prop="serialNumber"
            label="序号"
            width="60">
                <template slot-scope="scope">
                    <span v-html="scope.row.serialNumber" class="circle">
                    </span>
                </template>
            </el-table-column>
            <el-table-column
            prop="organization"
            label="分组织"
            width="80">
            </el-table-column>
            <el-table-column
            prop="department"
            label="部门">
            </el-table-column>
            <el-table-column
            prop="business"
            label="业务组">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名">
            </el-table-column>
            <el-table-column
            prop="quota"
            label="销售额">
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: ['table'],
  data () {
    return {
      timer: null
    };
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.tables {
    background-color: rgba(74, 144, 226, 0.57) !important;
    color: #fff;
}
.contain {
    display: flex;
    width: 1000px;
    margin-bottom: 40px;
    .main {
        width: 495px;
        height: 352px;
        overflow: hidden;
        box-sizing: border-box;
        border-image-source: url(../../../assets/img/border-121-0f05f2ce15011b2a.png);
        border-width: 14px;
        border-image-slice: 14 fill;
        border-style: solid;
        background-clip: padding-box;
        ::v-deep .el-table{
            color: rgb(115, 170, 229);
            background-color: transparent !important;
        }
        .el-table__expanded-cell {
            background-color: rgba(74, 144, 226, 0.57) !important;
            color: #fff;
        }

        ::v-deep .el-table tr {
            background-color: transparent !important;
        }
        ::v-deep .el-table__body td,::v-deep .el-table__header th,
        .el-table .cell {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }
        ::v-deep .el-table::before {
        //去除底部白线
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
        }
        ::v-deep .el-table thead {
            background-color: rgba(74, 144, 226, 0.57);
            color: #fff;
        }
        .circle {
            width: 30px;
            height: 30px;
            background-color: rgb(123, 97, 97);
            color: #fff;
            display: block;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }
        tr:nth-child(-n+3) {
            background-color: pink;
        }

    }
    .main:last-of-type {
        margin-left: 10px;
    }
}
</style>